<template>
    <div class="cont">
        <div class="content">
            <div class="title">
                <!-- <div class="sosuo d-f">
                    <img draggable="false" src="http://test.bjclb.cn/uploads/assets/sosuo.png" alt="">
                    <input placeholder="搜索" type="text">
                </div> -->
                <div class="d-f j-b">
                    <div>
                        <div class="c33 f20 f-w">全部文档</div>
                        <div class="c99 f14">以下是您生成的全部PPT文件，您可以根据需求进行下载和删除。</div>
                    </div>
                    <div class="but buthove cff f16 d-f j-c" @click="establish">新建文档</div>
                </div>
                <div class="template_">
                    <div class="list" v-for="(item, index) in themelist">
                        <img draggable="false" @click="ai(item.download)" :src="item.cover" alt="">
                        <div class="c33 f14">
                            <div>{{item.title}}</div>
                            <div class="c99 f12 time p-r">
                                <div class="p-a popper" v-show="type == index">
                                    <div v-if="item.download" class="d-f" @click="updata(item.download)">
                                        <img draggable="false" src="http://test.bjclb.cn/uploads/assets/dowd.png" alt=""> 下载
                                    </div>
                                    <div class="d-f" @click="deletes(item.id)">
                                        <img draggable="false" src="http://test.bjclb.cn/uploads/assets/delete.png" alt=""> 删除
                                    </div>
                                </div>
                                <div class=" ov">{{item.created_at}}</div>
                                <img draggable="false" @click="show(index)" src="http://test.bjclb.cn/uploads/assets/caozuo.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-pagination @change="pages_" v-model="currentPage"  :page-count="pages" mode="simple" />
    </div>
</template>

<script lang="ts" setup>

import Navi from "./Navi.vue";
import { ref, onMounted } from "vue";
import router from "@/router";
import { list,remove } from "@/axios/index";
import { showSuccessToast,showConfirmDialog} from "vant";

const emit = defineEmits(["establishs", ""]);
const establish = () => {
  emit("establishs"); // 回传 deleteOutcome为自定义名称
};
const ai = (val) => {
    window.open("https://view.officeapps.live.com/op/view.aspx?src=" + val);
};
const pages =ref<number>(1);
const currentPage = ref(1);
const type = ref<number>();
const themelist = ref<Array>([])
const lists = async () => {
    let { data } = await list({
        page:currentPage.value,
        limit:12
    });
    if (data.code == 0) {
        themelist.value = data.data.orders
        pages.value = data.data.pages
        console.log(pages.value);
        
    } else {

    }
};
const id = ref("")
const pages_ = async (val) => {
    currentPage.value = val
    lists();
};
const updata = async (url) => {
    const link = document.createElement("a");
    // 这里是将链接地址url转成blob地址，
     fetch(url)
    .then(res => res.blob())
    .then(blob => {
      link.href = URL.createObjectURL(blob);
      // 下载文件的名称及文件类型后缀
      link.download = url;
      document.body.appendChild(link);
      link.click();
      //在资源下载完成后 清除 占用的缓存资源
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      type.value = -1
    });
};
const deletes = async (val) => {
    showConfirmDialog({
        title: '温馨提示',
        message:
            '确定要删除当前PPT吗？',
    })
    .then(() => {
        id.value = val
        deletes_();
    })
    .catch(() => {
        // on cancel
    });
};

const deletes_ = async (val) => {
    let { data } = await remove({
        id:id.value
    });
    if (data.code == 0) {
        showSuccessToast({ message: '删除成功', forbidClick: true });
        type.value = -1
        lists()
    } else {

    }
};
onMounted(() => {
    lists();
});
const show = async (val) => {
    if (type.value == val) {
        type.value = -1
    } else {
        type.value = val
    }
};
</script>

<style lang="scss" scoped>
::v-deep .van-pagination__items{
    width: 300px;
    margin: 20px auto 0 auto;
}
::v-deep .van-pagination__page-desc{
    height: auto;
    font-size: 15px;
}
 ::v-deep  .van-pagination__item{
    height: 30px;
    font-size: 15px;
    color: #333;
    bottom{
        width:  30px;
    }
}
::v-deep .van-pagination__item button{
    cursor: pointer;
    &:hover{
        color: #317DEC;
    }
}
.cont {
    width: calc(80% - 270px);
    padding: 0 20px;
    z-index: 2;
    margin: 65px auto;
    min-width: 658px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 8px 0px rgba(233, 238, 254, 0.2);
    border-radius: 12px;
}

.content {

    width: 100%;
    z-index: 2;

    .title {
        width: 100%;

        .sosuo {
            width: 272px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #E4E4E4;
            padding: 0 20px;
            margin-bottom: 50px;

            img {
                width: 14px;
                height: 14px;
                margin-right: 10px;
            }

            input {
                border: 0;
                height: 90%;
                width: 80%;
            }
        }

        .f-w {
            margin-bottom: 10px;
        }

        .but {
            width: 120px;
            height: 40px;
            background: linear-gradient(90deg, #209CF5 0%, #3872E8 100%);
            box-shadow: 0px 1px 3px 0px rgba(32, 156, 245, 0.55);
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.5s ease-in-out;
            &:active{
                opacity: 0.8;
            }
        }
        .but:hover {
            transform: scale(1.05);
        }
        .template_ {
            display: flex;
            flex-wrap: wrap;

            .list {
                margin-top: 24px;
                background: #FCFDFF;
                border-radius: 12px;
                border: 1px solid #EBEBEB;
                overflow: hidden;
                margin-right: 1%;
                width: calc(24.2% - 2px);
                cursor: pointer;

                &:nth-child(4n) {
                    margin-right: 0%;
                }

                img {
                    width: 100%;
                    height: auto;
                }

                .c33 {
                    padding: 10px 14px;
                }

                .time {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;

                    img {
                        width: 20px;
                        height: auto;
                        margin-left: 5px;
                    }
                }

                .popper {
                    right: 0;
                    bottom: 20px;
                    padding: 14px 10px;
                    background: #FCFDFF;
                    box-shadow: 0px 0px 10px 0px rgba(6, 0, 1, 0.2);
                    border-radius: 8px;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 9px;
                    }

                    .d-f {
                        &:nth-child(1) {
                            margin-bottom: 10px;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:1190px) {
        .list {
            margin-top: 24px;
            background: #FCFDFF;
            border-radius: 12px;
            border: 1px solid #EBEBEB;
            overflow: hidden;
            margin-right: 1%;
            width: calc(32.3% - 2px) !important;
            cursor: pointer;

            &:nth-child(4n) {
                margin-right: 1% !important;
            }

            &:nth-child(3n) {
                margin-right: 0% !important;
            }
        }
    }
}
</style>